<template>
	<div>
		<div>
			<el-row>
				<el-button type="primary" size="mini" round @click="empty()"><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
				<el-button type="success" size="mini" round :plain="true" @click="save()"><i class="el-icon-finished"></i> 保存</el-button>
				<el-button type="primary" size="mini" round @click="edit()"><i class="el-icon-circle-plus-outline"></i> 编辑</el-button>
				<el-button type="danger" size="mini" round @click="delApp()"><i class="el-icon-delete"></i> 删除</el-button>
				<el-button type="primary" size="mini" round><i class="el-icon-printer"></i> 打印</el-button>
				<el-divider direction="vertical"></el-divider>
				<el-button type="primary" size="mini" round @click="submitSP()">提交审批</el-button>
				<el-button type="primary" size="mini" round>审批</el-button>
				<el-button type="primary" size="mini" round>审批记录</el-button>
			</el-row>
		</div>
		<hr />
		<h2>采购申请</h2>
		<div class="pur-main">
			<el-form ref="form" :rules="rules" :model="form" label-width="90px" size="small">
				<el-row gutter="20">
					<el-col span="6">
						<el-form-item prop="app_id" label="单据编号:">
							<span v-if="show">
								<el-input v-model="form.app_id" disabled="true" placeholder="保存自动生成"></el-input>
							</span>
							<span v-else>{{form.app_id}}</span>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="theme" label="主题:">
							<span v-if="show">
								<el-input v-model="form.theme" placeholder="输入主题"></el-input>
							</span>
							<span v-else>{{form.theme}}</span>	
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="purtype" label="采购类别:">
							<span v-if="show">
								<el-select v-model="form.purtype" clearable placeholder="请选择">
									<el-option v-for="item in purType" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</span>
							<span v-else>{{form.purtype}}</span>
						</el-form-item>
					</el-col>
					<el-col span="6">
						<el-form-item prop="sourcetype" label="源单类型:">
							<span v-if="show">
								<el-select v-model="form.sourcetype" clearable placeholder="请选择" @change="changeSourceid">
									<el-option v-for="item in sourceType" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</span>	
							<span v-else>{{form.sourcetype}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="20">
					<el-col span="8">
						<el-form-item prop="applicant" label="申请人:">
							<span v-if="show">
								<el-input v-model="form.applicant" type="text"></el-input>
							</span>	
							<span v-else>{{form.applicant}}</span>
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item prop="appdept" label="申请部门:">
							<span v-if="show">
								<el-select v-model="form.appdept" filterable clearable placeholder="请输入或选择">
									<el-option v-for="item in dept" :key="item.value" :label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</span>
							<span v-else>{{form.appdept}}</span>
						</el-form-item>
					</el-col>
					<el-col span="8">
						<el-form-item prop="appdate" label="申请日期:">
							<span v-if="show">
								<el-date-picker v-model="form.appdate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 100%;"></el-date-picker>
							</span>
							<span v-else>{{form.appdate}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row gutter="20">
					<el-col span="8">
						<el-form-item prop="sourceid" label="源单号:">
							<span v-if="show">
								<el-input v-model="form.sourceid" :disabled="disabled">
									<el-button type="text" slot="suffix" icon="el-icon-search" @click="dialogTableVisible = true"></el-button>
								</el-input>
							</span>
							<span v-else>{{form.sourceid}}</span>
						</el-form-item>
					</el-col>
					<!-- <el-dialog title="源单列表" :visible.sync="dialogTableVisible">
						<el-form :inline="true" :model="dialogForm" class="demo-form-inline" size="mini">							
							<el-form-item label="查询条件:">
								<el-select v-model="dialogForm.tital" placeholder="主题">
									<el-option label="主题" value="theme"></el-option>
									<el-option label="编号" value="idcode"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dialogForm.text"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="onSubmit" plain>查询</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="gridData" size="mini" border height="262" @selection-change="getSourceid">
							<el-table-column type="selection" width="45" align="center"></el-table-column>
							<el-table-column align="center" width="50" type="index" label="序号"></el-table-column>
							<el-table-column property="pro_id" label="编号" width="150"></el-table-column>
							<el-table-column property="pro_name" label="名称" width="200"></el-table-column>
							<el-table-column property="pro_spe" label="规格"></el-table-column>
							<el-table-column property="pro_unit" label="单位"></el-table-column>
						</el-table>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="dialogTableVisible = false">取 消</el-button>
							<el-button size="mini" type="primary" @click="dialogTableVisible = false">确 定</el-button>
						</span>
					</el-dialog> -->
					<el-col span="16">
						<el-form-item prop="address" label="到货地址:">
							<span v-if="show">
								<el-input v-model="form.address" placeholder="输入到货地址"></el-input>
							</span>
							<span v-else>{{form.address}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col span="12">
						<el-form-item prop="remarks" label="备注:">
							<span v-if="show">
								<el-input v-model="form.remarks" type="textarea" maxlength="100" show-word-limit></el-input>
							</span>
							<span v-else>{{form.remarks}}</span>
						</el-form-item>
					</el-col>	
				</el-row>
				<div class="upload">
					<el-row>
						<el-upload class="upload-fj" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview"
						 :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
							<el-button size="small" type="primary">附件</el-button>
						</el-upload>
					</el-row>
				</div>
			</el-form>	
			<div class="pur-detail">
					<hr />
					<el-row>
						<span style="color:gray;margin-left: 10px;">采购申请明细</span>
						<el-divider direction="vertical"></el-divider>
						<el-button type="primary" size="mini" @click="addRow(tableData)" plain round>增行</el-button>
						<el-button type="primary" size="mini" @click="delData()" plain round>删行</el-button>
					</el-row>
					<hr />
					<el-dialog title="物品列表" :visible.sync="dialogProductVisible">
						<el-form :inline="true" :model="productForm" class="demo-form-inline" size="mini">							
							<el-form-item label="类别:">
								<el-select v-model="productForm.kin_name" placeholder="主题">
									<el-option label="A类" value="A类"></el-option>
									<el-option label="B类" value="B类"></el-option>
									<el-option label="C类" value="C类"></el-option>
									<el-option label="D类" value="D类"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-input v-model="productForm.pro_name" placeholder="名称模糊查询"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="queryProduct()" plain>查询</el-button>
							</el-form-item>
						</el-form>
						<el-table :data="productData" size="mini" border height="262" @selection-change="getProduct">
							<el-table-column type="selection" width="45" align="center"></el-table-column>
							<el-table-column align="center" width="50" type="index" label="序号"></el-table-column>
							<el-table-column property="pro_id" label="编号" width="150"></el-table-column>
							<el-table-column property="pro_name" label="名称" width="200"></el-table-column>
							<el-table-column property="pro_spe" label="规格"></el-table-column>
							<el-table-column property="pro_unit" label="单位"></el-table-column>
						</el-table>
						<span slot="footer" class="dialog-footer">
							<el-button size="mini" @click="dialogProductVisible = false">取 消</el-button>
							<el-button size="mini" type="primary" @click="queding">确 定</el-button>
						</span>
					</el-dialog>
					<el-table :data="tableData" border style="width:100%" size="mini" height="400" show-summary highlight-current-row
					 :summary-method="getSummaries" @selection-change="selectRow">
						<el-table-column type="selection" width="60" align="center"></el-table-column>
						<el-table-column align="center" width="60" type="index" label="序号"></el-table-column>
						<el-table-column align="center" width="140" prop="pro_id" label="物品编号">
							<template slot-scope="scope">
								<span v-if="scope.row.show">
									<el-input size="mini" v-model="scope.row.pro_id">
										<el-button type="text" slot="suffix" icon="el-icon-search" @click="getDlogDate(scope.$index)"></el-button>
									</el-input>
								</span>
								<span v-else>{{scope.row.pro_id}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" width="150" prop="pro_name" label="物品名称">
							<template slot-scope="scope">
								<span v-if="scope.row.show">
									<el-input size="mini" v-model="scope.row.pro_name"></el-input>
								</span>
								<span v-else>{{scope.row.pro_name}}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="pro_spe" label="规格">
							<template slot-scope="scope">
								<span v-if="scope.row.show">
									<el-input size="mini" v-model="scope.row.pro_spe"></el-input>
								</span>
								<span v-else>{{scope.row.pro_spe}}</span>								
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="pro_unit" label="单位">
							<template slot-scope="scope">
								<span v-if="scope.row.show">
									<el-input size="mini" v-model="scope.row.pro_unit"></el-input>
								</span>
								<span v-else>{{scope.row.pro_unit}}</span>								
							</template>
						</el-table-column>
						<el-table-column align="center" width="120" prop="dmd_quantity" label="需求数量">
							<template slot-scope="scope">
								<span v-if="scope.row.show">
									<el-input size="mini" v-model="scope.row.dmd_quantity"></el-input>
								</span>
								<span v-else>{{scope.row.dmd_quantity}}</span>								
							</template>
						</el-table-column>
						<el-table-column align="center" width="180" prop="dmd_date" label="需求日期">
							<template slot-scope="scope">
								<span v-if="scope.row.show">
									<el-date-picker size="mini" v-model="scope.row.dmd_date" type="date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
								</span>
								<span v-else>{{scope.row.dmd_date}}</span>					
							</template>
						</el-table-column>
						<el-table-column align="center" width="180" prop="app_reason" label="申请原因">
							<template slot-scope="scope">
								<span v-if="scope.row.show">
									<el-input size="mini" v-model="scope.row.app_reason"></el-input>
								</span>
								<span v-else>{{scope.row.app_reason}}</span>
								
							</template>
						</el-table-column>
					</el-table>
			</div>
			
		</div>
	</div>
</template>

<script>
	export default {
		inject: ['reload'],
		name:'',
		data() {
			return {
				result:{},
				purType: [{
					value: '集中采购',
					label: '集中采购'
				}, {
					value: '设备采购',
					label: '设备采购'
				}, {
					value: '物料采购',
					label: '物料采购'
				}, {
					value: '成品采购',
					label: '成品采购'
				}],
				dept: [{
					value: '采购部',
					label: '采购部'
				}, {
					value: '仓管部',
					label: '仓管部'
				}, {
					value: '销售部',
					label: '销售部'
				}, {
					value: '人事部',
					label: '人事部'
				}, {
					value: '财务部',
					label: '财务部'
				}],
				form: {
					app_id:'',
					theme: '',
					purtype: '',
					applicant: '',
					appdept: '',
					appdate: '',
					sourcetype: '',
					sourceid: '',
					address: '',
					remarks: ''
				},
				productForm: {
					kin_name: '',
					pro_name: ''
				},
				
				productData: [{
					pro_id: '',
					pro_name: '',
					pro_spe: '',
					pro_unit:''
				}],
				dialogTableVisible: false,
				dialogProductVisible: false,
				rules: {
					theme: [{
							required: true,
							message: '请输入主题',
							trigger: 'blur'
						},
						{
							min: 4,
							max: 10,
							message: '长度在 4 到 10 个字符',
							trigger: 'blur'
						}
					],
					purtype: [{
						required: true,
						message: '请选择采购类型',
						trigger: 'change'
					}],
					applicant: [{
						required: true,
						message: '请填写申请人',
						trigger: 'blur'
					}],
					aplidept: [{
						required: true,
						message: '请填写申请部门',
						trigger: 'blur'
					}],
					aplidate: [{
						type: 'date',
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					sourtype: [{
						required: true,
						message: '请选择源单类型',
						trigger: 'change'
					}],
					address: [{
						required: true,
						message: '请输入到货地址',
						trigger: 'blur'
					}],
					number: [{
						required: true,
						message: '请输入数量',
						trigger: 'change'
					}]
				},
				sourceType: [{
					value: '无来源',
					label: '无来源',
				}, {
					value: '采购计划',
					label: '采购计划',
				}, {
					value: '库存填充',
					label: '库存填充'
				}],
				tableData: [{
					pro_id: '',
					pro_name: '',
					pro_spe: '',
					pro_unit: '',
					dmd_quantity: '',
					dmd_date: '',
					app_reason: ''
				}],
				selectlistRow: [],
				res:{},
				disabled:false,
				tableInfo:'',
				show:true,
				checkProductData:[],
				myindex:-1
			}
		},
		created() {
			this.tableData.map(i => {
                i.show = true;
                return i
            });
			this.getParams();
			
		},
		methods: {			
			changeSourceid(){
				if(this.form.sourcetype === '无来源'){
					this.disabled=true
				}
				else{
					this.disabled=false
				}
			},			
			// 获取表格选中时的数据
			selectRow(val) {
				this.selectlistRow = val
			},
			//添加行
			addRow(tableData) {
				tableData.push({
					pro_id: '',
					pro_name: '',
					pro_spe: '',
					pro_unit: '',
					dmd_quantity: '',
					dmd_date: '',
					app_reason: ''
				})
				this.tableData.map(i => {
				    i.show = true;
				    return i
				});
			},
			//删除行
			delData() {
				for (let i = 0; i < this.tableData.length; i++) {
					const val = this.tableData[i];
					val.index = i
				}

				if (this.selectlistRow.length == 0)
					this.$message.error('请先选择删除的数据！')
				this.selectlistRow.forEach(val => {
					this.tableData.forEach((v, i) => {
						if (val.index == v.index) {
							// i 为选中的索引
							this.tableData.splice(i, 1)
						}
					})
				})
				// 删除完数据之后清除勾选框
				this.$refs.tableData.clearSelection()
			},
			
			queding(){
				//this.$refs.productData.clearSelection();
				this.dialogProductVisible = false;
			},
			
			//表尾合计
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总计';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr);
							if (!isNaN(value)) {
								return prev + curr;
							} else {
								return prev;
							}
						}, 0);
						sums[index] += ' ';
					} else {
						sums[index] = ' ';
					}
				});

				return sums;
			},
			//选择物品
			getProduct(val){
				this.checkProductData=val;
					for(let i in val ){
						console.log(val);
						this.tableData[i].pro_id = val[i].pro_id;
						this.tableData[i].pro_name = val[i].pro_name;
						this.tableData[i].pro_spe = val[i].pro_spe;
						this.tableData[i].pro_unit = val[i].pro_unit;
						//this.addRow()
					}
								
				//this.form.sourceform = (val[0])['pro_id']
				this.myindex=-1;
			},
			getDlogDate(index){
				this.myindex = index;
				this.dialogProductVisible = true;
			},
			//源单引入
			sourceFormInto(){
				
			},
			empty(){
				this.reload();
			},
			
			queryProduct(){
				let params = [];
				params.form = JSON.stringify(this.productForm);
				let _this = this;
				this.$axios.post(
					"product",params				
				)
					.then(function(v){
						_this.productData = v.data;
					})
					.catch(function(ex){
						alert("数据走丢了")
					})
			},
			save(){
				//http://localhost:8089/purApp/saveApp?id=1&name=yf1803
				//var app=JSON.stringify(this.form);
				let params = [];
				params.form = JSON.stringify(this.form);
				params.table = JSON.stringify(this.tableData);
				console.log("params:",params);
				let _this = this;
				this.$axios.post(
					"purApp/saveApp",
					params
				).then(function(v){
						_this.res = v.data;
						alert("")
						//this.$message.success('已保存!');
					}).catch(ex=>{
						alert("出错了："+ex);						
					})
					this.reload();
			},
			edit(){
				this.show = !this.show;
				this.tableData.map(i => {
				    i.show = true;
				    return i
				});
			},
			delApp(){
				alert("确定删除?")
				this.$axios.post("purApp/delApp?appId="+this.form.app_id+"")
				.then(function(v){
					alert("删除成功！")
					//this.$message.success('已删除！')
				}).catch(e=>{
					alert("出错了："+e)
				})
				this.reload();
			},
			getParams(){				
				var routerParam = this.$route.params.result;				
				this.form = routerParam[0];
				this.tableData = routerParam[1];
				this.show = this.$route.params.show;
				console.log(this.show);
				console.log(routerParam);
				
				this.form.appdate = this.dateFormat(this.form.appdate);
				
				for(let i in this.tableData){
					//const date = new Date(this.tableData[i].dmd_date);
					//console.log(date);										
					this.tableData[i].dmd_date = this.dateFormat(this.tableData[i].dmd_date);	
				}
				this.$router.replace('/Purchase_requisition')
			},
			
			submitSP(){
				alert("确定提交审批吗？")
				this.$axios.post("purApp/updateToOne?appId="+this.form.app_id+"")
				.then(function(v){
					alert("已提交！")
				}).catch(e=>{
					alert("出错了："+e)
				})
				
			},
			//时间格式化函数，此处仅针对yyyy-MM-dd hh:mm:ss 的格式进行格式化
			dateFormat(time) {
				var date=new Date(time);
				var year=date.getFullYear();
				/* 在日期格式中，月份是从0开始的，因此要加0
				 * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				 * */
				var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
				var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
				//var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
				//var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
				//var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				// 拼接
				return year+"-"+month+"-"+day;
			}

		},
		watch:{
			//监测路由 及时调用获取参数方法
			'$route': 'getParams'
		}
	}
</script>

<style scoped>
	h2 {
		text-align: center;
	}

	.pur-main {
		border: 2px solid gainsboro;
		padding-top: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.upload {
		border: 1px solid #66B1FF;
		background: lightgray;
	}

	.pur-detail {
		border: 1px #66B1FF solid;
		margin-top: 10px;
		margin-bottom: 20px;
	}

</style>
